<template>
  <div class="container">
    <div class="content">当前灯: {{ sig }}, 倒计时: {{ remain }}s</div>
    <van-row style="margin-top: 30px">
      <van-col :span="8"><van-button type="primary" @click="changeLight('Green')">切换绿灯</van-button></van-col>
      <van-col :span="8"><van-button type="danger" @click="changeLight('Red')">切换红灯</van-button></van-col>
      <van-col :span="8"><van-button type="warning" @click="changeLight('Yellow')">切换黄灯</van-button></van-col>
    </van-row>
  </div>
</template>

<script>
import Signal from '@/utils/signal'
export default {
  name: 'Signal',
  data() {
    return {
      sig: 'Red',
      remain: 10
    }
  },
  mounted() {
    const s = new Signal({ init: 'Red', times: [10, 3, 5] })
    this.s = s
    s.on('change', e => {
      this.sig = e.sig
    })
    s.on('tick', e => {
      this.remain = Math.round(e.remain)
    })
  },
  methods: {
    changeLight(sig) {
      console.log('切换信号灯', sig)
      this.s.sig = sig
      this.s.setTime()
      this.sig = sig
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 800px;
  margin: 0 auto;
}
</style>
